<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作业_弹幕</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .wrapBox {
      width: 800px;
      height: 550px;
      border: 1px solid #000;
      margin: 50px auto 0;
    }

    .videoBox {
      height: 500px;
      position: relative;
      overflow: hidden;
    }

    .videoBox img {
      width: 100%;
      height: 100%;
    }

    video {
      width: 100%;
      /* height: 500px; */
    }

    .danmuSend {
      display: flex;
      height: 50px;
    }

    #content {
      flex: 1;
    }

    #send {
      width: 100px;
    }

    .danmu {
      color: #f00;
      font-size: 20px;
      position: absolute;
      left: 800px;
      top: 0;
      white-space: nowrap;
    }

    .danmu img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      vertical-align: middle;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="wrapBox">
    <div class="videoBox">
      <img src="./img/pic3.jpg" />
    </div>
    <div class="danmuSend">
      <input id="content" type="text">
      <button id="send">发送</button>
    </div>
  </div>
</body>
<script>


  var oSend = document.querySelector('#send');
  var oContent = document.querySelector('#content');
  var oVideoBox = document.querySelector('.videoBox');
  function sendMsg() {
    var content = oContent.value;

    var oSpan = document.createElement('span');
    oSpan.className = 'danmu';
    oSpan.innerHTML = `<img src="./img/pic3.jpg">${content}`;

    oVideoBox.appendChild(oSpan);

    var maxTop = oVideoBox.clientHeight - oSpan.offsetHeight;

    oSpan.style.top = Math.round(Math.random() * maxTop) + 'px';

    var timer = setInterval(() => {
      var left = oSpan.offsetLeft;
      left -= 10;
      oSpan.style.left = left + 'px';
      if (left < -oSpan.offsetWidth) {
        clearInterval(timer);
        oSpan.remove();
      }
    }, 100);
  }

  oSend.onclick = function () {
    sendMsg();
  }

  window.onkeydown = function (e) {
    var ev = e || event;
    var keyCode = ev.keyCode || ev.which;
    if (keyCode === 13 && ev.altKey) {
      sendMsg();
    }
  }

</script>